<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="resource/css/bootstrap.css">
    <script type="text/javascript" src="resource/js/jquery-3.2.1.js"></script>
</head>
<body>
    <form:form modelAttribute="water" action="add" method="post">
        <table class="table">
            <tr>
                <td colspan="3">
                    财务日期:<form:input path="dates" type="date"></form:input>
                    <form:errors path="dates"></form:errors>
                </td>
            </tr>
            <tr>
                <td>
                    源账号名称:<form:input path="c1.name" onkeyup="aa1(this.value)"></form:input>
                    <form:errors path="c1.name"></form:errors>
                </td>
                <td colspan="2">
                    源账号:<form:hidden path="c1.id"></form:hidden>
                    <span id="sp1"></span>
                </td>
            </tr>
            <tr>
                <td>
                    目标账号名称:<form:input path="c2.name" onkeyup="aa2(this.value)"></form:input>
                    <form:errors path="c2.name"></form:errors>
                </td>
                <td colspan="2">
                    目标账号:<form:hidden path="c2.id"></form:hidden>
                    <span id="sp2"></span>
                </td>
            </tr>
            <tr>
                <td>
                    科目编号:<form:input path="counts"></form:input>
                    <form:errors path="counts"></form:errors>
                </td>
                <td colspan="2">
                    科目:<form:input path="name"></form:input>
                    <form:errors path="name"></form:errors>
                </td>
            </tr>
            <tr>
                <td>
                    借方:<form:input path="jie" onblur="jie1()"></form:input>
                    <span id="jsr1"></span>
                </td>
                <td>
                    贷方:<form:input path="dai" onblur="dai1()"></form:input>
                    <span id="jsr2"></span>
                </td>
                <td>
                    余额:<form:input path="money" readonly="true"></form:input>
                    <span id="a3"></span>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    摘要:<form:input path="other"></form:input>
                    <form:errors path="other"></form:errors>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <input type="button" value="提交" onclick="su()">
                </td>
            </tr>
        </table>
    </form:form>

    <script type="text/javascript">
        //计算金额  和正则
        function jie1(){
            var regJie = /^(\d+|\d+\.\d{1,2})$/
            var jie = $("[name='jie']").val();
            if (regJie.test(jie)){
                $("#jsr1").html('');
            }else{
                $("#jsr1").html('<font style="color: red">借方数值为整数、1位小数、2位小数</font>');
            }
            //金额
            var dai = $("[name='dai']").val();
            var money = jie - dai;
            $("[name='money']").val(money);
        }
        function dai1(){
            var regDai = /^(\d+|\d+\.\d{1,2})$/
            var dai = $("[name='dai']").val();
            if (regDai.test(dai)){
                $("#jsr2").html('');
            }else{
                $("#jsr2").html('<font style="color: red">贷方数值为整数、1位小数、2位小数</font>');
            }
            //金额
            var jie = $("[name='jie']").val();
            var money = jie - dai;
            $("[name='money']").val(money);
        }
        //边输入边查询
        function aa1(name){
            $.ajax({
                type:"post",
                data:{name:name},
                url:"selectById",
                success:function (msg){
                    $("#sp1").html(msg);
                    $("[name='c1.id']").val(msg);
                },
                dataType:"json"
            })
        }
        function aa2(name){
            $.ajax({
                type:"post",
                data:{name:name},
                url:"selectById",
                success:function (msg){
                    $("#sp2").html(msg);
                    $("[name='c2.id']").val(msg);
                },
                dataType:"json"
            })
        }
        //提交
        function su(){
            var jie = $("[name='jie']").val();
            var dai = $("[name='dai']").val();
            if (jie != '' || dai != ''){
                $("form").submit();
            }else{
                $("#a3").html('<font style="color: red">至少选择一方数值</font>');
            }
        }
    </script>
</body>
</html>
